<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户主页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index-bg.css">
    <link rel="stylesheet" href="./css/container.css">
    <link rel="stylesheet" href="./css/animation.css">
</head>

<body>
<!-- 引入的大背景 -->
    <div class="intro">
        <!-- <div class="banner">云顶书院图书管理系统</div> -->
        <!-- 找个好看的字体层层叠叠那种 -->
        <!-- <div class="banner">YunQi Book Management</div> -->
        <!-- <img src="./img/index-nav-bg3.png" style="width: 100%;"> -->

        <!-- 导航栏------------------------------- -->
        <div class="nav">
           <div class="container">
                <div class="nav-logo">
                    <img src="./img/yunding-logo2.png">
                </div>
                <!-- 登陆后这里就写的是 欢迎xxx -->
                <div class="un-login">
                    <div class="nav-login"><a href="">登陆</a></div>
                    <div class="nav-login">|</div>
                    <div class="nav-login"><a href="">注册</a></div>
                </div>
                <div class="login">
                    <!-- <div>welcome</div> -->
                </div>
                
                <div class="nav-list">
                    <div class="li"><a class="li" href="index.html">首页</a></div>
                    <!-- 跳转到首页的问题好像不能用锚点 and其他页面导航栏的细节问题！！！ -->
                    <li class="li">
                        <a class="li my-list" id="my-list" href="#my">我的</a>
                        <ul class="sub" style="display: none;">
                            <li>未读消息</li>
                            <li>已借书籍</li>
                            <li>借阅历史</li>
                        </ul>

                    </li>
                    <li class="li"><a class="li" href="#hot-list">热榜</a></li>
                    <li class="li"><a class="li" href="#book-list">图书库</a></li>
                    <li class="li"><a class="li" href="#user-message">用户反馈</a></li>
                </div>
            </div>
        </div>

        <div class="container">
        <!-- 搜索框------------------------------------------------>
            <div class="search-box">
                <div class="search-cate">
                    <label for="category">检索分类</label>
                    <select id="category" class="category" >
                        <option>书名</option>
                        <option>类别</option>
                    </select>
                </div>
                <!-- 下拉条选择 -->
                <input type="text" class="search-bar" placeholder="输入你想借的书吧！\(￣︶￣*\))">
                <button class="search-btn">
                    检索
                    <!-- <img src="./img/search-bar放大镜.png" style="zoom: 20%;"> -->
                </button>
            </div>
        </div>
    </div>

<!-- 淡蓝色背景 -->
    <div class="bg">
        <div class="container">
            <!-- 我的--------------------------------- -->
            <div class="none" id="my"></div>
            <!-- 这个none是用来调正锚点的！！！ -->

            <div class="my">
                <div class="header">
                    <img class="head-logo" src="./img/my.png">
                    <div class="big-h">我的</div>
                </div>

                <!-- 未读消息 -->
                <div class="my-messgage">
                    <header class="my-messgage-header">
                        <img src="">
                        <div class="middle-h">未读消息</div>
                    </header>
                    <div class="my-messgage-main">
                        <!-- 后端！！！--------------------------------------------------------------- -->
                        <li>管理员已处理审批，请于x日x时去xx拿书。</li>
                        <button>已读</button>
                        <!-- 按下去变灰 -->
                    </div>
                </div>

                <!-- 已借书籍 -->
                <div class="my-bookshelf">
                    <header class="my-bookshelf-header">
                        <!-- <img src="./img/my.png"> -->
                        <div class="middle-h">已借书籍</div>
                    </header>
                    <div class="my-bookshelf-main">
                        <!-- 后端！！！--------------------------------------------------------------- -->
                        <div class="book-box">
                            <!-- <div class="my-book-img"></div>
                            <div class="my-book-message"></div> -->
                        </div>
                        <div class="book-box"></div>
                        <div class="book-box"></div>
                        <!-- <div class="book-box"></div>
                        <div class="book-box"></div> -->
                    </div>
                    <!-- 怎么做到有几个展示几个？ -->
                    
                </div>

                <!-- 借阅历史 -->
                <div class="my-history">
                    <header class="my-history-header">
                        <img src="">
                        <div class="middle-h">借阅历史</div>
                    </header>
                    <div class="my-history-main">
                        <!-- 后端！！！------------------------------------------------------------ -->
                        <li>...</li>
                    </div>
                </div>
            </div>
    
            <!-- 热榜--------------------------------- -->
            <div class="none" id="hot-list"></div>

            <div class="hot-list" id="hot-list">
                <div class="header">
                    <div class="big-h">热榜</div>
                </div>
                <div class="hot-main">
                    <div>竖着的轮播图！！！！后端</div>
                </div>
            </div>
    
            <!-- 图书库------------------------------- -->
            <div class="none" id="book-list"></div>

            <div class="book-list" id="book-list">
                <div class="header">
                    <div class="big-h">图书库</div>
                </div>

                <div class="book-box">

                </div>
            </div>
    
            <!-- 反馈--------------------------------- -->
            <div class="none" id="user-message"></div>

            <div class="user-message" id="user-message">
                <div class="header">
                    <div class="big-h">用户反馈</div>
                </div>
                <div class="user-main">
                    <input type="text" class="user-input">
                </div>
            </div>
        </div>

        <footer class="footer">
            <div class="container">
                云启未来，梦抵星辰。
                <br>
                云启未来，梦抵星辰。
                <br>
                云启未来，梦抵星辰。
            </div>
        </footer>

    </div>
    
    
</body>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./js/index.js"></script>
</html>